<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
        	<!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script-->
        	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        	<meta name="viewport" content="width = 900"/>
        	<meta name="keywords" content="instaright firefox addon, instaright chrome addon, instapaper firefox addon, instapaper chrome addon, export delicious to instapaper, how to export delicious bookmarks to instapaper, instapaper import delicious, delicious to instapaper, import delicious bookmarks, instapaper delicious"/>
        	<!--link rel="stylesheet" type="text/css" href="/css/landing_form.css"/-->
        	<link rel="stylesheet" type="text/css" href="/css/style.css"/>
                <script type="text/javascript" src="/static/javascript/util.js"></script>
                <script type="text/javascript" src="/static/javascript/chart.js"></script>
                <script type="text/javascript" src="http://www.google.com/jsapi"></script>
                <script type="text/javascript">
                        google.load('visualization', '1', {packages: ['imagechart']});
                        google.load('jquery', '1.4.2');
                </script>
                <script type="text/javascript">
                        google.setOnLoadCallback(drawVisualization(6,null, "{{ instaright_account }}"));
                        google.load(drawVisualization);
                </script>
		<script type="text/javascript" src="/static/javascript/jquery.fancybox-1.3.4.pack.js"></script>
                <script type="text/javascript" src="/static/javascript/jquery.cookie.js"></script>
		<link rel="stylesheet" href="/css/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
        	<script type="text/javascript" src="/static/javascript/jquery.form.js"></script>
        	<link rel="stylesheet" type="text/css" href="/css/landing_form.css"/>
		<script>
			$(document).ready(function(){
				var instaright_cookie = $.cookie("user_uuid");
				var oauth_connect_link={};
				oauth_connect_link["facebook"]='javascript:fblogin();'
				oauth_connect_link["twitter"]='http://www.instaright.com/oauth/twitter/login'
				oauth_connect_link["evernote"]='http://www.instaright.com/oauth/evernote/login'
				oauth_connect_link["google"]='https://www.google.com/accounts/ServiceLogin?service=ah&passive=true&continue=https://appengine.google.com/_ah/conflogin%3Fcontinue%3Dhttp://www.instaright.com/&ltmpl=gm&shdf=CioLEgZhaG5hbWUaHkluc3RhcmlnaHQgU29jaWFsIEJvb2ttYXJrIGFwcAwSAmFoIhTE48qzG8DBDmHMiwb872gE6aMgLSgBMhSxq_6FfkBd9xImrOBLDCHK6sbOIg'
				oauth_connect_link["picplz"]='http://www.instaright.com/oauth2/picplz/login'

				try{
				var show_more = true;

				$('.big_button').click(function(){
					//TODO valdation
					button=$(this);
					instapaper_username=$('#iuser').val();
					$.ajax({
						type: "GET",
						url: '/user/update',
						data: "cookie="+instaright_cookie+"&instapaper_username="+instapaper_username,
						cache: false,
						success: function(data){
							$('#agree').fadeIn('slow');
							setTimeout(function(){ $('#agree').fadeOut();}, 2000);
						}
					})
					return false;
					

				})
				$('.remove_user_info').click(function(){
					loc=$(this).attr('href')
					service=loc.replace('user','').replace('remove','').replace(/\//g,'');
					link=$(this);
					if (link.text() == 'Connect'){
						return true;
					}
					$.ajax({
						type: "GET",
						url: loc,
						data: "cookie="+instaright_cookie,
						cache: false,
						success: function(data){
							//$(link).slideToggle(400);
							toggle_link=$(link).text() == 'Remove'? oauth_connect_link[service]:$(link).attr('href');
							$(link).attr('href',toggle_link);
							$(link).text(($(link).text() == 'Remove'?'Connect':'Remove'));
						}
					})
					return false;
				})
				$('.user_data').ajaxForm({
					target: "#response",
					success: function(){
						$("#response").fadeIn("slow");
					}
				});
				$('.link_group_date').click(function(){
					var mode = $(this).find('.show_toggle').html();
					if (mode == "Collapse"){
						$(this).find('.show_toggle').html("Expand");
					} else {
						$(this).find('.show_toggle').html("Collapse");
					}
					$(this).next().toggle('slow');
					return false;
				});
				$(".load_more_container").live("click", function(){
					var last_content_clone = $("div .link_details_container:last").clone();
					var load_container = $(this);
					var offset = $(this).attr("id");
					var cookie = $.cookie("user_uuid");
					if (!cookie){ 
						alert("no cookie");
					}
					if (!offset){
						offset=0
					}
					$.ajax({
						type: "GET",
						url: "/link/user",
						data: "cookie="+cookie+"&offset="+offset,
						cache: false,
						success: function(data){
							var j = "";
							try{
								j = eval(data);
								if (jQuery.isEmptyObject(j)){
									if ($("#no_more_updates").length == 0){
										$(load_container).append("<div id='no_more_updates'>No more updates</div>");
									}
									return;
								}
								for (p in j){
									dd = new Date(j[p][0]);
									dd_day=dd.getDate();
									dd_month=getMonth3U_int(dd.getMonth());
									if (window.console && window.console.log) {
										console.log("::for date" + dd_month + " got " + j[p][1].length + " links");
									}
									date_group=dd_month + " " + dd_day
									if ($(".date_group:last").text() != date_group){
										if (window.console && window.console.log) {
											console.log("date group " + date_group + " doesn't exists creating new date group");
										}
										link_group_clone=$(".link_group:last").clone();
										$(link_group_clone).find(".date_group").text(date_group);
										$(link_group_clone).find(".toggle_div").children().remove();
										links=$('.links');
										$(links).append(link_group_clone);

									}
									content = $("div .toggle_div:last");
									links_for_date = j[p][1];
									for (i=0; i < links_for_date.length; i++){
										title=links_for_date[i]['t'];
										domain=links_for_date[i]['d'];
										link=links_for_date[i]['l'];
										if (window.console && window.console.log) {
											console.log('title:'+title+' domain:'+ domain+' link:'+ link)
										}
										new_elem=last_content_clone;
										ico='http://'+domain+'/favicon.ico';
										$(new_elem).find('a:first').attr('href', link);
										$(new_elem).find('a:first').text(title);
										$(new_elem).find('a:last').attr('href', link);
										$(new_elem).find('a:last').text(link);
										$(new_elem).find('img:last').attr('src',ico);
										$(content).append(new_elem);
										if (window.console && window.console.log) {
											console.log(new_elem);
										}
										last_content_clone = $("div .link_details_container:last").clone();
									}
								}
							offset = parseInt(offset) + 1;
							$(load_container).attr('id', offset);
							} catch(e){
								alert('erro:'+e);
							}
						}
					});
				});
				$("#usage_stats").fancybox({
					'scrolling'        :'no',
					'titleShow'        :false,
					'onClosed'         :function(){
					}
				});
				$("#trophy_room").fancybox({
					'scrolling'        :'no',
					'titleShow'        :false,
					'onClosed'         :function(){
					}
				});
				$("#user_account").fancybox({
					'scrolling'        :'no',
					'titleShow'        :false,
					'onClosed'         :function(){
					}
				});
				}catch(e){alert(e);}
			});
		</script>
        </head>
        <body>
	<div id="nav" >
		<div class="center clearfix">
			<h5><a href="/">Instaright - Perfect information for you in realtime.</a></h5>
                	<ul class="menu borderless clearfix"> 
				<li><a href="/category" title="Instaright most populat category list"><span>Categories</span></a></li>
				<li><a href="/tools" title="Instaright tools"><span>Tools</span></a></li>
                        	{% if user %}
					<li><a href="/user/dashboard"><span>{{ user }}</span></a></li>
					<li><a href="/user/dashboard"><img src="{{ avatar }}" width="20" height="20" /></a></li>
					<li><a href="{{ logout_url }}"><span>Logout</span></a></li>
                        	{% else %}
					<li><a id="btn_login" href="/account" title="Login"><span>Login</span></a></li>
                        	{% endif %}
                        	<li>
                        	</li>

                	</ul>
		</div>
	</div>	
    <div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function() {
        FB.init({appId: '180962951948062', status: true, cookie: true,
                 xfbml: true});
      };
      (function() {
        var e = document.createElement('script');
        e.type = 'text/javascript';
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
      }());
    </script>
	<script>
		function fblogin(){
			FB.login(function(response){
				window.location.reload();
			}, {perms:'read_stream,publish_stream, email, offline_access'});
		}
	</script>
	<div style="display: none;">
		<div id="statsHeader" ></div>
		<div id="visualization" style="width: 400px; height: 200px;  display: inline-block;"></div>
	</div>
	<div style="display: none;">
		<div id="edit_account" style="width: 600px;">
			<div id="form">
			    <div id="form_inner">
			        <form action="/user/edit" method="post" id="user_data">
            
				    <h5><span>Services</span></h5>
				    <div style="display: block">
						<div class="account_field_column_left">
			            			<label for="iuser" style="width: 100%">Instapaper Account</label>
							<input type="text" name="iuser" id="iuser" class="required text_field" value="{{ instaright_account }}"/>
						</div>
						<div class="account_field_column_right">
							<span>Exactly, only instapaper username</span>
						</div>
						<br style="clear:both;"/>
			    	    </div>
			            <div class="account_field_label">Evernote Account</div>
				    <div class="account_field">
					    {% if evernote_token %}
					    	<div class="account_field_data"><img src="/static/images/evernote_small.png" />&nbsp;&nbsp;{{ evernote_profile }}</div>
					    	<div class="profile_remove"><a class="remove_user_info" href="/user/evernote/remove">Remove</a></div>
					    {% else %}
					    	<div class="account_field_data"><img src="/static/images/evernote_small.png" />&nbsp;&nbsp;</div>
					    	<div class="profile_remove"><a href="/oauth/evernote/login">Connect</a></div>
					    {% endif %}
				    	    <br style="clear:both;"/>
				    </div>
			            <div class="account_field_label">Picplz Account</div>
				    <div class="account_field">
					    {% if picplz_token %}
					    	<div class="account_field_data"><img src="/static/images/picplz_small.png" />&nbsp;&nbsp;{{ picplz_profile }}</div>
					    	<div class="profile_remove"><a class="remove_user_info" href="/user/picplz/remove">Remove</a></div>
					    {% else %}
					    	<div class="account_field_data"><img src="/static/images/picplz_small.png" />&nbsp;&nbsp;</div>
					    	<div class="profile_remove"><a href="/oauth2/picplz/login">Connect</a></div>
					    {% endif %}

				    	    <br style="clear:both;"/>
				    </div>
				    <h5><span>Identities</span></h5>
			            <div class="account_field_label">Facebook Account</div>
				    <div class="account_field">
					    {% if facebook_token %}
					    	<div class="account_field_data"><img src="/static/images/facebook_small.png"/>&nbsp;&nbsp;{{ facebook_profile }}</div>
					    	<div class="profile_remove"><a class="remove_user_info" href="/user/facebook/remove">Remove</a></div>
					    {% else %}
					    	<div class="account_field_data"><img src="/static/images/facebook_small.png"/>&nbsp;&nbsp;</div>
					    	<div class="profile_remove"><a href="javascript:fblogin();">Connect</a></div>
					    {% endif %}
				    	    <br style="clear:both;"/>
				    </div>
			            <div class="account_field_label">Twitter Account</div>
				    <div class="account_field">
					    {% if twitter_token %}
					    	<div class="account_field_data"><img src="/static/images/twitter_small.png"/>&nbsp;&nbsp;{{ twitter_profile }}</div>
					    	<div class="profile_remove"><a class="remove_user_info" href="/user/twitter/remove">Remove</a></div>
					    {% else %}
					    	<div class="account_field_data"><img src="/static/images/twitter_small.png"/>&nbsp;&nbsp;</div>
					    	<div class="profile_remove"><a href="/user/twitter/connect">Connect</a></div>
					    {% endif %}
				    	    <br style="clear:both;"/>
				    </div>
			            <div class="account_field_label">Google Account</div>
				    <div class="account_field">
					    {% if google_token %}
					    	<div class="account_field_data"><img src="/static/images/google_small.png" />&nbsp;&nbsp;{{ google_profile }}</div>
					    	<div class="profile_remove"><a id="google" class="remove_user_info" href="/user/google/remove">Remove</a></div>
					    {% else %}
					    	<div class="account_field_data"><img src="/static/images/google_small.png" />&nbsp;&nbsp;</div>
					    	<div class="profile_remove"><a href="https://www.google.com/accounts/ServiceLogin?service=ah&passive=true&continue=https://appengine.google.com/_ah/conflogin%3Fcontinue%3Dhttp://www.instaright.com/&ltmpl=gm&shdf=CioLEgZhaG5hbWUaHkluc3RhcmlnaHQgU29jaWFsIEJvb2ttYXJrIGFwcAwSAmFoIhTE48qzG8DBDmHMiwb872gE6aMgLSgBMhSxq_6FfkBd9xImrOBLDCHK6sbOIg">Connect</a></div>
					    {% endif %}
				    	    <br style="clear:both;"/>
				    </div>
				    <br style="clear:both;"/>
			            <div>
			                <input type="submit" value="Save" class="big_button" /><img id="agree" src="/static/images/agree.png" />
			            </div>
			       </form>
			    </div>
			 </div>
			<div id="response"></div>
		</div>
	</div>
	<div style="display: none;">
		<div id="badges" style="width: 400px;">
			{% if badges %}
				{% for b in badges %}
					<div class="single_badge"><img width="60" height="60" src="/static/images/{{ b.0 }}.png" /><div class="badge_desc">{{ b.1 }}</div></div>
				{% endfor %}
			{% else %}
			<span>No badges at moment. Hold on, we have something for you <a href="/tools">here</a></span>
			{% endif %}
		</div>
	</div>
	<div class="profile_block">
		<div class="profile_top">
			<div class="profile_top_header">
				<div class="profile_top_left"></div>
				<div class="profile_top_center"></div>
			</div>
			<div class="profile_content">
				<div class="profile_content_left_border"></div>
				<div class="profile_content_right_border"></div>
				<div class="profile_content_wrapper">
					<a class="user_image" ref="#"><img src="{{ avatar }}" width="70" height="70" /></a>
					<div class="profile_text_wrapper">
						<h1>{{ user }}</h1>
						<span></span>
					</div>
					<div class="actions">
						<span class="stats text_bubble"><a id="usage_stats" href="#visualization">Statistics</a></span>
						<span class="badges text_bubble"><a id="trophy_room" href="#badges">Trophy Room</a></span>
						<span class="edit text_bubble"><a id="user_account" href="#edit_account">Edit Account</a></span>
						<!--span class="edit text_bubble"><a id="user_account" href="#edit_account">Edit Account</a></span-->
					</div>
				</div>
			</div>
			<div class="profile_content_bottom">
				<div class="profile_content_bottom_left"></div>
				<div class="profile_content_bottom_center"></div>
			</div>
		</div>
		<div class="profile_score">
			<div class="profile_score_top">
				<div class="profile_score_top_left"></div>
				<div class="profile_score_top_center"></div>
			</div>
			<div class="profile_score_content">
				<div class="profile_score_content_left_border"></div>
				<div class="profile_score_content_right_border"/></div>
				<div class="profile_score_content_wrapper">
					<span class="points" >{{ score }}</span><br>
					<small class="level">Level 2</small>
				</div>
			</div>
			<div class="profile_score_bottom">
				<div class="profile_score_bottom_left"></div>
				<div class="profile_score_bottom_center"></div>
			</div>
		</div>
	</div>

	<div id="user_dashboard_content">
		<div class="link_container_top"></div>
			<div class="link_container_top_left"></div>
			<div class="link_container">
                	<div class="links">
			{% if links %}
                        {% regroup links|dictsortreversed:"date" by date|date:"M d"  as links_by_date %}

                        {% for links in links_by_date %}
			<div class="link_group">
				<div class="link_group_date">
					<a class="date_group" href="#">{{ links.grouper }}</a>
					<a class="show_toggle" href="#">Collapse</a>
				</div>
				<div class="toggle_div">
                        
                        	{% for item in links.list %}
				<div class="link_details_container">
					<div class="link_container_result">
						<div class="link_container_title">
							<h4 class="link_title">
								<img class="link_fav_icon" src="http://{{ item.domain }}/favicon.ico" width="16" height="16" />
								<a href="{{ item.url }}">{{ item.title }}</a>
							</h4>
						</div>
						<div class="link_container_url">
							<a href="{{ item.url }}" target="_new">{{ item.url }}</a>
						</div>
					</div>
					<!--div class="link_options">
						<ul class="tools_list">
							<li class="tools_list_item">
								<a href="#" >Give me more of this</a>
							</li>
							<li class="tools_list_item">
								<a href="#" >View as text only</a>
							</li>
							<li class="tools_list_item">
								<a href="#" >Add note</a>
							</li>
						</ul>
					</div-->
				</div>
                        	{% endfor %}
				</div>
			</div>
                        {% endfor %}
                	</div>
			</div>
		</div>
		<div class="load_more_container" id="1">
			<div id="load_more" >load more</div>
		</div>
		{% else %}
		<div>
			<div class="promo">
				<span><a href="/tools" class="span_link">No saves yes ... no worries it will get better! </a></span><br>
				<span><a href="/tools" class="span_link">Start by downloading addon for your favorite browser here.</a></span></div>
			</div>
		{% endif %}
	</div>
	<div class="clearfix"></div> 
	{% include 'footer.html' %}
        </body>
</html>
